<template>
  <div>
    <el-dialog
      title="模版列表管理"
      :visible.sync="dialogVisible"
      width="800px"
      :before-close="handleClose">
      <div class="el-form-wrap">
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="附件名字">
            <el-col :span="11">
            <el-input v-model="form.filename" readonly></el-input>
            </el-col>
            <el-col class="line" :span="13">
              <el-button type="primary" @click="_openFiles" style="margin-left:5px;"  >上传</el-button>
            </el-col>
          </el-form-item>
          <el-form-item label="附件地址">
            <el-col :span="11">
              <el-input v-model="form.filepath" readonly ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="创建日期">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.createdate" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="活动区域">
            <el-select v-model="form.topicid" placeholder="请选择活动区域">
              <el-option v-for="item in optionsList" :label="item.topic" :value="item.id" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
    <upload-files ref="upload" :multiple="false" @ok="callback"></upload-files>
  </div>
</template>

<script>
    import UploadFiles from '@/components/UploadFiles/index.vue';
    export default {
        components:{
          UploadFiles
        },
        name: "AddItem",
        data() {
          return {
            dialogVisible: false,
            optionsList:[],
            form:{
              filename:'',
              filepath:'',
              createdate:new Date(),
              topicid:'',
            }
          }
        },
        props: {
          propName: {
            type: Number,
            default: 0
          },
        },
        methods: {
          handleClose(){
            this.dialogVisible = false
          },
          show() {
            this.dialogVisible = true;
            this._asyncTopic();
          },
          hide() {
            this.dialogVisible = false;
          },
          add(){
            this.api({
              url: "/file/addFile",
              method: "post",
              headers:{
                'content-type':'application/x-www-form-urlencoded'
              },
              data:this.$qs.stringify({...this.form})
            }).then(data => {
                this.hide();
                this.$emit('ok',data);
            })
          },
          _asyncTopic(){
            this.api({
              url: "/topic/topicList",
              method: "post",
              headers:{
                'content-type':'application/x-www-form-urlencoded'
              },
            }).then(data => {
              this.optionsList = data;
              if(data.length > 0)  this.form.topicid = data[0].id;
            })
          },
          _openFiles(){
              this.$refs.upload.show();
          },
          callback(item){
            this.form.filename = item[0].data.filename;
            this.form.filepath = item[0].data.filepath;
          }
        },
    }
</script>

<style scoped>

</style>
